<style scoped lang="scss">
.chat-con{
  display: flex;
  flex-direction: column;

  & > view{
    &:nth-child(1){
      flex: 1;
      overflow: hidden;
    }
    &:nth-child(2){
      margin: 32rpx 40rpx;
      display: flex;
      border-radius: 40rpx;
      background: #FFFFFF;
      border: 1rpx solid #567AED;
      padding-left: 30rpx;
      padding-right: 30rpx;

      & > view{
        &:nth-child(1){
          flex: 1;
          textarea{
            padding-top: 20rpx;
            padding-bottom: 20rpx;
            width: 100%;
          }
        }
        &:nth-child(2){
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 10rpx;
          text{
            color: #AABCF6;
            font-size: 38rpx;
          }
        }
      }
    }
  }
}


.group-btn{
  font-size: 36rpx;
  color: #101012;
}

</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head :back="true">
        {{ title || 'AI助手' }}
      </h-head>
    </view>

    <view class="s-body chat-con">
      <view>
        <scroll-view class="maxh" :scroll-y="true" :scroll-top="scrollY">
          <chat-list :temp-msg="tempMsg" :list="chatList" :welcome-text="welcomeText" type="chat" @refsh="refsh"></chat-list>
        </scroll-view>
      </view>


      <view>
        <view>
          <textarea auto-height @input="changeInput" @keyup.enter="send" v-model="text" :placeholder="placeholder || '请输入要问的问题吧'" maxlength="9000"></textarea>
        </view>
        <view @click="send">
          <text class="iconfont icon-fasong"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import ChatList from "../../components/chat/ChatList";

export default {
  components: {
    ChatList
  },
  onShow() {

  },
  onLoad(option) {
    this.info = this.storage.getQaConfig()
    this.title = this.info[option.type == 1 ? 'title' : 'name']
    if(this.info.placeholderText) {
      this.placeholder = this.info.placeholderText
    }
    if(this.info.welcomeText) {
      this.welcomeText = this.info.welcomeText
    }

    this.id = option.id
    this.type = option.type
    this.initChatList()
  },
  onHide() {
  },
  onUnload() {
  },
  data() {
    return {
      title: '',
      placeholder: '',
      welcomeText: null,
      info: {},
      id: '',
      type: '',
      sseId: '',
      lock: false,
      text: '',
      scrollY: 99999,
      tempMsg: null,
      chatList: [],
    };
  },
  methods: {
    initChatList() {
      if(this.type == 2) {
        this.initRole()
      }else{
        this.initCreation()
      }
    },
    initRole() {
      this.httpClient.post({
        url: this.APIPath.chat.list,
        data: {
          identityId: this.id
        }
      }).then(res => {
        this.tempMsg = null
        this.chatList = res.data
        this.lastScroll()
      }, err => {
      })
    },
    initCreation() {
      this.httpClient.post({
        url: this.APIPath.chat.list,
        data: {
          modelId: this.id
        }
      }).then(res => {
        this.tempMsg = null
        this.chatList = res.data
        this.lastScroll()
      }, err => {
      })
    },
    refsh(d) {
      if(this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }

      this.text = d.messageText
      this.send()
    },
    lastScroll(num = 999) {
      this.$nextTick(res => {
        this.scrollY += num
        setTimeout(v => {
          this.scrollY += num
        }, 200)
      })
    },
    changeInput() {
      if(this.text.indexOf('\n') > -1) {
        this.text = this.text.replaceAll('\n', '')
      }
    },
    send() {
      if(this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }

      const text = this.text
      if(!text) {
        return this.utils.toast('请输入内容');
      }

      this.lock = true

      this.utils.getSsm(event => {

        this.utils.checkSseData(event.data).then(res => {
          if(res.event === "sseId") {
            this.sseId = res.id

            this.text = ''
            this.tempMsg = {
              my: text,
              ai: ''
            }

            this.httpClient.post({
              url: this.APIPath.chat.sendMsg,
              noLoading: true,
              data: {
                id: res.id,
                message: text,
                groupId: this.groupId
              }
            }).then(res => {

            }, err => {
              if(event && event.target && event.target.close) {
                event.target.close();
              }
            })
            return;
          }else if (res.event === "message") {
            this.tempMsg.ai = res.data
            this.lastScroll(100)
          }else if(res.event === "end") {
            this.lock = false
            if(event && event.target && event.target.close) {
              event.target.close();
            }
            this.initChatList()
          }
        }, err => {
          this.lock = false
          event.target.close();
        })
      }, event => {
        this.lock = false
        if(event && event.target && event.target.close) {
          event.target.close();
        }
      })
    }
  },
};
</script>

